<template>
    <div class="cancel-limit-shadow" v-show="cancelLimitPage.show" @click="cancelLimitPage.close">
        <div class="cancel-limit" @click.stop="">
            <div class="icon" style="--icon: url(/icon/toast/cancel.svg)"></div>
            <div class="text-box">
                <div class="text">Are you sure you want to cancel this limit order?</div>
            </div>
            <div class="btn-box">
                <div class="btn" style="background-color: #99999950; color: #333;" @click="no">Keep Order</div>
                <div class="btn" style="background-color: #ff2442e0; color: #fff;" @click="yes">Cancel Order</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { cancelLimitPage, tradingService } from '@/service/trading';
import { loading } from '@/service/status';

function yes() {
    // 开启加载框
    loading.value = true;
    // 调接口取消限价订单
    tradingService.cancelOpenOrder(cancelLimitPage.id);
    // 关闭限价订单确认界面
    cancelLimitPage.close();
    setTimeout(() => {
        loading.value = false;
    }, 500);
}

function no() {
    cancelLimitPage.close();
}
</script>

<style scoped lang="less">
.cancel-limit-shadow {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background-color: #88888880;

    .cancel-limit {
        box-sizing: border-box;
        width: 70vw;
        height: 60vw;
        padding: 5vw;
        background-color: #fff;
        border-radius: 2vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5vw;

        .icon {
            --size: 20vw;
            --icon-size: 50%;
            --w: var(--size);
            --h: var(--size);
            border-radius: 50%;
            background-color: #ff244215;
        }

        .text-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1vw;

            .title {
                font-size: 4vw;
                font-weight: 500;
                text-align: center;
            }
    
            .text {
                font-size: 3.5vw;
                text-align: center;
                color: var(--text-color);
            }
        }

        .btn-box {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 3vw;

            .btn {
                --h: 8vw;
                flex: 1;
                height: var(--h);
                line-height: var(--h);
                font-size: 3vw;
                font-weight: 500;
                text-align: center;
                border-radius: 1vw;
            }
        }
    }
}
</style>